<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="list"
    :columns="columns"
    row-key="tokenId"
  >
    <template #operation="{ record }">
      <b-button
        code="monitor:online:forceLogout"
        icon="del"
        type="link"
        @click="onDelete(record)"
        >强退</b-button
      >
    </template>
  </ProTable>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { Modal, message } from 'ant-design-vue';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { parseTime } from '@/utils/utils';
import { forceLogout, list } from '@/api/monitor';

const tableRef = ref();
const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '序号',
    dataIndex: 'index',
    fixed: 'left',
    width: 60,
    hideInSearch: true,
    customRender({ pageSize, pageNum, index }) {
      return (pageNum.value - 1) * pageSize.value + index + 1;
    },
  },
  {
    title: '会话编号',
    dataIndex: 'tokenId',
    hideInSearch: true,
  },
  {
    title: '登录名称',
    dataIndex: 'userName',
  },
  {
    title: '部门名称',
    dataIndex: 'deptName',
    hideInSearch: true,
  },
  {
    title: '登录地址',
    dataIndex: 'ipaddr',
  },
  {
    title: '登录地点',
    dataIndex: 'loginLocation',
    hideInSearch: true,
  },
  {
    title: '浏览器',
    dataIndex: 'browser',
    hideInSearch: true,
  },
  {
    title: '操作系统',
    dataIndex: 'os',
    hideInSearch: true,
  },
  {
    title: '登录时间',
    dataIndex: 'loginTime',
    hideInSearch: true,
    width: 150,
    customRender({ text }) {
      return parseTime(text);
    },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    width: 80,
  },
]);
const sleep = (cb) => {
  setTimeout(() => {
    cb();
  }, 500);
};
const onDelete = async (row: any) => {
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `是否确认强退名称为${row.userName}的用户？`,
    onOk: async () => {
      await forceLogout(row.tokenId);
      sleep(() => tableRef.value.refresh());
      message.success('操作成功');
    },
  });
};
</script>
